<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>魔法水晶球</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <script src="/mobile/js/vap.min.js"></script>
  <script src="/mobile/js/svga.min.js"></script>
  <script src="/mobile/js/dsbridge.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
    overflow: hidden;
    background-color: transparent;
    transform: translate3d(0, 0, 0);
  }

  html,
  body {
    height: 100vh;
    background-color: transparent;
  }

  #app {
    width: 100vw;
    height: 100%;
    font-size: 0;
    overflow: hidden;
    position: relative;
  }

  .video {
    position: fixed;
    bottom: 0;
  }

  .box {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 99;
  }

  .close-btn {
    position: absolute;
    width: 6.4vw;
    height: 6.4vw;
    right: 2.1vw;
  }

  .type-btn {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .type-btn img {
    width: 40vw;
  }

  .menu-box {
    width: 14.9333vw;
    position: absolute;
    right: 0;
  }

  .menu-box img {
    width: 100%;
    margin-bottom: 2.4vw;
  }

  .play-btn {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    padding: 0 11.7333vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .play-btn img {
    width: 22.4vw;
  }

  .van-overlay {
    z-index: 999;
  }

  .award {
    width: 87.2vw!important;
    height: 123.2vw!important;
    background: url(award-box.png) no-repeat;
    align-items: flex-start!important;
    padding-top: 25.3333vw!important;
    position: relative!important;
  }

  .record {
    background: url(record-box.png) no-repeat;
  }

  .pool {
    background: url(pool-box.png) no-repeat;
  }

  .rule {
    background: url(rule-box.png) no-repeat;
  }

  .iframe-box {
    width: 77.0666vw;
    height: 101.0666vw;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14.6666vw 5.1333vw 5.3333vw;
    box-sizing: border-box;
  }

  .iframe {
    width: 100%;
    height: 100%;
  }
  .award-contain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .award-contain.center {
    justify-content: center;
  }
  .award-contain.left {
    justify-content: flex-start;
  }

  .award-box {
    overflow: hidden;
    min-height: 80px;
    padding: 5px;
    text-align: center;
    margin-bottom: 4vw;
  }

  .img-box {
    position: relative;
    font-size: 0;
    height: 25.33vw;
    background: url(award-wrapper.png) no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .prize-tag {
    width: 5.6vw;
    height: 2.9333vw;
    position: absolute;
    top: 0;
    left: 2px;
  }
  .prize-num {
    font-size: 2.4vw;
    color: #fff;
    position: absolute;
    top: 0;
    right: 2px;
  }
  .prize-img {
    width: 50%;
    height: 50%;
    object-fit: contain;
  }
  .prize-name {
    font-size: 2.4vw;
    color: #fff;
    text-align: center;
  }
  .award-bottom {
    position: absolute;
    width: 46.4vw;
    bottom: 5.3333vw;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .again {
    width: 46.4vw;
  }
  .total-shell {
    font-size: 2.6666vw;
    color: #acbbd9;
  }
  .shell-icon {
    width: 2.6666vw;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-right: 2px;
  }

  [v-cloak] {
    display: none;
  }

  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="box" v-show="!isOpen && complete">
      <img id="close" class="close-btn" src="close-btn.png" alt="" @click="closeWebview">
      <!-- <div class="type-btn">
        <img src="left-btn.png" alt="">
        <img src="right-btn.png" alt="">
      </div> -->
      <div class="menu-box">
        <img src="pool-btn.png" alt="" @click="showDialog('poolShow')">
        <img src="rule-btn.png" alt="" @click="showDialog('ruleShow')">
        <img src="record-btn.png" alt="" @click="showDialog('recordShow')">
        <img v-if="animate" src="animate-open.png" @click="setAnimate(false)" alt="">
        <img v-else src="animate-close.png" @click="setAnimate(true)" alt="">
      </div>
      <div class="play-btn">
        <img src="play-1.png" @click="play(0)" alt="">
        <img src="play-10.png" @click="play(1)" alt="">
        <img src="play-20.png" @click="play(4)" alt="">
      </div>
    </div>
    <div id="video" class="video" v-show="!isOpen"></div>
    <div id="open" class="video" v-show="isOpen"></div>
    <van-overlay :show="awardShow" @click="closeAwardDialog">
      <div class="iframe-box award" @click.stop>
        <van-row :class="['award-contain', awardList.length <= 3 ? 'center' : 'left']">
          <van-col span="8" v-for="(item, index) in awardList" :key="index" class="award-box">
            <div class="img-box">
              <img class="prize-tag" :src="awardType[item.awardType]" alt="">
              <div class="prize-num">x{{item.qty}}</div>
              <img class="prize-img" :src="item.url" alt="">
            </div>
            <div class="prize-name">{{item.name}}</div>
          </van-col>
        </van-row>
        <div class="award-bottom">
          <div class="total-shell">总价值： <img class="shell-icon" src="/mobile/img/recharge-shell.png" alt="">{{totalShell}}</div>
          <img class="again" src="again.png" @click="playAgain" alt="">
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="recordShow" @click="recordShow = false">
      <div class="iframe-box record" @click.stop>
        <iframe id="recordShow" class="iframe" :src="`/mobile/crystal/record.html?type=1&token=${token}`" frameborder="0"></iframe>
      </div>
    </van-overlay>
    <van-overlay :show="poolShow" @click="poolShow = false">
      <div class="iframe-box pool" @click.stop>
        <iframe id="poolShow" class="iframe" :src="`/mobile/crystal/pool.html?type=1&token=${token}`" frameborder="0"></iframe>
      </div>
    </van-overlay>
    <van-overlay :show="ruleShow" @click="ruleShow = false">
      <div class="iframe-box rule" @click.stop>
        <iframe id="ruleShow" class="iframe" :src="`/mobile/crystal/rule.html?type=1&token=${token}`" frameborder="0"></iframe>
      </div>
    </van-overlay>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      vap: null,
      open: null,
      isOpen: false,
      animate: true,
      poolShow: false,
      recordShow: false,
      ruleShow: false,
      awardShow: false,
      token: '',
      roomId: '',
      deviceType: '',
      awardList: [],
      totalShell: 0,
      times: 0,
      awardType: {
        1: 't-1.png',
        3: 't-3.png',
      },
      complete: false
    },
    created () {
      this.token = dsBridge.call('getToken', '')
      this.roomId = dsBridge.call('getRoomId', '')
      var userAgent = navigator.userAgent
      if (userAgent.toLowerCase().includes('android')) {
        this.deviceType = '1'
      } else if (/(iPhone|iPad|iPod)/.test(userAgent)) {
        this.deviceType = '2'
      } else {
        // 鸿蒙
        this.deviceType = '3'
      }
    },
    mounted() {
      // 动态计算宽高
      var width = screen.width
      var height = screen.width * 667 / 375
      document.querySelector('.box').style.height = height + 'px'
      // 动态计算元素位置
      document.querySelector('#close').style.bottom = (height * 472 / 667) / height * 100 + '%'
      // document.querySelector('.type-btn').style.bottom = (height * 385 / 667) / height * 100 + '%'
      document.querySelector('.menu-box').style.bottom = (height * 173 / 667) / height * 100 + '%'
      document.querySelector('.play-btn').style.bottom = (height * 43 / 667) / height * 100 + '%'
      // vap播放器
      // this.vap = new Vap.default().play({
      //   container: document.querySelector('#video'),
      //   src: 'video.mp4',
      //   config: { "info": { "v": 2, "f": 120, "w": 750, "h": 1334, "fps": 24, "videoW": 1504, "videoH": 1344, "aFrame": [754, 0, 750, 1334], "rgbFrame": [0, 0, 750, 1334], "isVapx": 0, "orien": 0 } },
      //   loop: true,
      //   width: width,
      //   height: height,
      // })
      // this.vap.play()
      // this.open = new Vap.default().play({
      //   container: document.querySelector('#open'),
      //   src: 'start.mp4',
      //   config: { "info": { "v": 2, "f": 45, "w": 750, "h": 1334, "fps": 15, "videoW": 1136, "videoH": 1344, "aFrame": [754, 0, 375, 667], "rgbFrame": [0, 0, 750, 1334], "isVapx": 0, "orien": 0 } },
      //   width: width,
      //   height: height,
      // })

      // svga播放器
      document.querySelector('#video').style.width = width + 'px'
      document.querySelector('#video').style.height = height + 'px'
      var player1 = new SVGA.Player('#video');
      var parser1 = new SVGA.Parser('#video'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
      var that = this
      this.$toast.loading({
        message: '资源加载中',
        forbidClick: true,
        duration: 0
      })
      parser1.load('d.svga', function (videoItem) {
        player1.setVideoItem(videoItem)
        player1.setContentMode('Fill')
        player1.startAnimation()
        that.complete = true
        that.$toast.clear()
      })
      document.querySelector('#open').style.width = width + 'px'
      document.querySelector('#open').style.height = height + 'px'
      var player2 = new SVGA.Player('#open');
      player2.loops = 1
      player2.clearsAfterStop = false
      console.log(player2)
      var parser2 = new SVGA.Parser('#open'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
      parser2.load('s.svga', function (videoItem) {
        player2.setVideoItem(videoItem)
        player2.setContentMode('Fill')
      })
      this.open = player2
    },
    methods: {
      showDialog (type) {
        if (!this.token) {
          this.$toast('用户信息获取失败')
          return
        }
        document.getElementById(type).contentWindow.location.reload(true)
        this[type] = true
      },
      setAnimate(boolean) {
        this.animate = boolean
      },
      play(times) {
        if (!this.roomId) {
          this.$toast('房间信息获取失败')
          return
        }
        this.times = times
        // 请求接口完了播放动画
        var query = `extractQty=${times}&extractType=1&roomId=${this.roomId}&systemType=${this.deviceType}`
        var str = ISCRYPT ? `args=${encrypt(query)}` : query
        this.$toast.loading({
          forbidClick: true,
          duration: 0
        })
        request.get(`/api/business/app/extractBuyRecord/startExtract3?${str}`, {
          headers: {
            token: this.token
          }
        }).then(res => {
          console.log(res)
          this.awardList = res.data
          this.totalShell = res.data[0].totalAwardCoin
          if (this.animate) {
            this.isOpen = true
            this.open.startAnimation()
            this.open.onFinished(() => {
              this.isOpen = false
              this.awardShow = true
            })
            return
          }
          this.isOpen = false
          this.awardShow = true
        }).finally(() => {
          this.$toast.clear()
        })
      },
      closeWebview () {
        dsBridge.call('closeWebview', '')
      },
      closeAwardDialog () {
        this.awardShow = false
        setTimeout(() => {
          this.totalShell = 0
          this.awardList = []
        }, 500)
        
      },
      playAgain () {
        this.awardShow = false
        setTimeout(() => {
          this.play(this.times)
        }, 500)
      }
    }
  })
  </script>
</body>

</html>